<template>
	<view class="page">
		<view class="header">
			<text class="title">预约排队 · 老火锅南山店</text>
		</view>
		
		<view class="content">
			<!-- 选择人数 -->
			<view class="section">
				<text class="section-title">👥 就餐人数</text>
				<view class="number-picker">
					<button class="btn-minus" @click="decreasePeople">-</button>
					<text class="number">{{peopleCount}}</text>
					<button class="btn-plus" @click="increasePeople">+</button>
				</view>
			</view>
			
			<!-- 选择到店时间 -->
			<view class="section">
				<text class="section-title">🕒 预计到店时间</text>
				<view class="time-picker" @click="showTimePicker">
					<text>{{selectedTime}}</text>
					<text class="arrow">▼</text>
				</view>
			</view>
			
			<!-- 联系方式 -->
			<view class="section">
				<text class="section-title">📱 手机号</text>
				<input type="number" v-model="phone" placeholder="请输入手机号" maxlength="11" />
			</view>
			
			<!-- 排队提示区 -->
			<view class="section queue-info">
				<text class="section-title">📊 当前排队情况</text>
				<view class="queue-item" v-for="(item, index) in queueInfo" :key="index">
					<text>{{item.type}}：排 {{item.count}} 桌 / 等待约 {{item.waitTime}} 分钟</text>
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<button class="submit-btn" @click="submitReservation">提交预约排队</button>
		</view>
		
		<!-- 时间选择弹出层 -->
		<uni-popup ref="timePopup" type="bottom">
			<view class="time-popup">
				<view class="popup-header">
					<text class="cancel" @click="closeTimePicker">取消</text>
					<text class="title">选择到店时间</text>
					<text class="confirm" @click="confirmTime">确定</text>
				</view>
				<view class="time-list">
					<view 
						class="time-item" 
						v-for="(item, index) in timeList" 
						:key="index"
						:class="{'active': selectedTimeIndex === index}"
						@click="selectTime(index)"
					>
						<text>{{item}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	import {onLoad,onShow} from "@dcloudio/uni-app";
	import request from "/common/api.js"
	
	// 数据定义
	const peopleCount = ref(2)
	const phone = ref('')
	const queueInfo = ref([
		{type: '二人桌', count: 3, waitTime: 15},
		{type: '四人桌', count: 6, waitTime: 20}
	])
	
	// 时间选择相关
	const timePopup = ref(null)
	const timeList = ref([
		'11:30', '12:00', '12:30', '13:00', '13:30',
		'17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30'
	])
	const selectedTimeIndex = ref(6) // 默认选中18:00
	const selectedTime = ref('18:00')
	
	// 方法定义
	const decreasePeople = () => {
		if(peopleCount.value > 1) {
			peopleCount.value--
		}
	}
	
	const increasePeople = () => {
		if(peopleCount.value < 8) {
			peopleCount.value++
		}
	}
	
	const showTimePicker = () => {
		timePopup.value.open()
	}
	
	const closeTimePicker = () => {
		timePopup.value.close()
	}
	
	const selectTime = (index) => {
		selectedTimeIndex.value = index
	}
	
	const confirmTime = () => {
		selectedTime.value = timeList.value[selectedTimeIndex.value]
		closeTimePicker()
	}
	
	const submitReservation = () => {
		if(!phone.value) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return
		}
		
		// TODO: 调用预约接口
		uni.showLoading({
			title: '提交中...'
		})
		
		// 模拟提交
		setTimeout(() => {
			uni.hideLoading()
			uni.showModal({
				title: '预约成功',
				content: '您的排队号码为：A25号\n预计等待时间：20分钟',
				showCancel: false,
				success: () => {
					// 跳转到排队进度页面
					uni.navigateTo({
						url: '/pages/functions/queue-progress'
					})
				}
			})
		}, 1500)
	}

	onShow(() => {
		// 可以在这里刷新排队信息
	})
</script>

<style>
	.page {
		width: 100vw;
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.header {
		padding: 20px;
		background-color: #fff;
	}
	
	.title {
		font-size: 18px;
		font-weight: bold;
	}
	
	.content {
		padding: 15px;
	}
	
	.section {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 15px;
	}
	
	.section-title {
		font-size: 16px;
		margin-bottom: 10px;
		display: block;
	}
	
	.number-picker {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.btn-minus, .btn-plus {
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f0f0;
		border-radius: 20px;
	}
	
	.number {
		margin: 0 20px;
		font-size: 18px;
	}
	
	.time-picker {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #f0f0f0;
		border-radius: 4px;
	}
	
	.arrow {
		color: #999;
	}
	
	input {
		width: 100%;
		height: 40px;
		background-color: #f0f0f0;
		border-radius: 4px;
		padding: 0 10px;
	}
	
	.queue-info {
		background-color: #fff8f8;
	}
	
	.queue-item {
		padding: 8px 0;
		color: #666;
	}
	
	.submit-btn {
		width: 90%;
		height: 45px;
		line-height: 45px;
		background-color: #e4393c;
		color: #fff;
		border-radius: 22px;
		margin: 20px auto;
	}
	
	/* 时间选择弹出层样式 */
	.time-popup {
		background-color: #fff;
		border-radius: 16px 16px 0 0;
		padding-bottom: 20px;
	}
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.popup-header .title {
		font-size: 16px;
		font-weight: bold;
	}
	
	.popup-header .cancel,
	.popup-header .confirm {
		font-size: 14px;
		padding: 5px 10px;
	}
	
	.popup-header .cancel {
		color: #666;
	}
	
	.popup-header .confirm {
		color: #e4393c;
	}
	
	.time-list {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.time-item {
		width: 30%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #f5f5f5;
		border-radius: 4px;
		margin: 5px;
		font-size: 14px;
	}
	
	.time-item.active {
		background-color: #e4393c;
		color: #fff;
	}
</style>
